<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset="utf-8">

  <link href="/css/phylotree.css" rel="stylesheet">

  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/bootstrap-theme.min.css">

  <script src="/js/jquery.js"></script>
  <script src="/js/bootstrap.min.js"></script>
  <script src="/js/d3.v3.min.js"></script>
  <script src="/js/underscore-min.js"></script>
  <script src="/phylotree.min.js"></script>
  <style>
#code {
  display: inline-block;
  width: 700px;
  padding-left: 50px;
}
  </style>
</head>
</head>

<body>
  <div>
    <form>
      <label>Radial layout</label>
      <input type="checkbox" id="layout" checked/>
    </form>
  </div>


  <svg id="tree_display"></svg>
  <div id="code"><pre><code class="javascript">d3.text("yokoyama.nwk", function(error, newick) {
  var tree = d3.layout.phylotree()
    .svg(d3.select("#tree_display"))
    .radial(true);

  tree(d3.layout.newick_parser(newick))
    .layout();

  $("#layout").on("click", function(e) {
    tree.radial($(this).prop("checked")).placenodes().update();
  });
});</code></pre></div>
<script>
    d3.text("yokoyama.nwk", function(error, newick) {
      var tree = d3.layout.phylotree()
        .svg(d3.select("#tree_display"))
        .radial(true);

      tree(d3.layout.newick_parser(newick))
        .layout();

      $("#layout").on("click", function(e) {
        tree.radial($(this).prop("checked")).placenodes().update();
      });
    });

    // for syntax highlighting
    hljs.initHighlightingOnLoad();
  </script>

</body>

</html>
